<template>
  <div>
    <div
      class="nav"
      :style="
        isMask
          ? 'z-index: 999999999999;'
          : 'box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);'
      "
    >
      <div class="logo">
        <div
          v-if="!showOpenDrawerBtn && !openDrawer"
          style="
            height: 100%;
            cursor: pointer;
            padding: 8px 12px 0px 24px;
            width: 149px;
          "
          @mouseenter="handleMouseOverLogo"
          @mouseleave="handleMouseOutLogo"
        >
          <img
            style="width: 110.34px; height: 32px"
            src="@/static/images/logo.png"
            alt=""
          />
        </div>
        <div
          @mouseleave="handleMouseOutLogo"
          class="DrawerBtn"
          v-if="showOpenDrawerBtn"
          @click="openDrawerClick"
        >
          <svg-icon icon-class="openDrawer"></svg-icon>
          <span class="DrawerBtn-text">点击展开</span>
        </div>
        <div class="DrawerBtn" v-else-if="openDrawer" @click="closeDrawerClick">
          <svg-icon icon-class="closeDrawer"></svg-icon>
          <span class="DrawerBtn-text">点击关闭</span>
        </div>
        <!-- <router-link :to="'/mirror'" class="suanjiayunLogo">
          <img src="../../../../public/images/logo.png" alt="logo" />
        </router-link> -->
        <!-- <div class="divided" v-if="!openDrawer&&!showOpenDrawerBtn"></div> -->
        <div
          class="model_name"
          :class="openDrawer || showOpenDrawerBtn ? '' : 'titleTextBefore'"
        >
          应用社区
        </div>
      </div>
      <div class="unlogin">
        <div class="help" @click="toHelp" style="opacity: 1">
          <img src="@/static/images/help.png" alt="" />
          帮助手册
        </div>
        <div class="divided" style="opacity: 0"></div>
        <div class="platform_box" @click="toWebsite">进入平台</div>
        <!-- <div class="official_website" @click="toWebsite">
        <img src="../../../../public/images/website.png" alt="" />
        算家云官网
      </div>
      <div class="divided"></div>
      <div class="register" v-if="!SuanjiaToken" @click="login">
        <span>立即使用</span>
      </div>
      <div class="loging" v-else>
        <img :src="basePicUrl + $store.getters.avatar" v-if="$store.getters.avatar != ''" />
        <span>{{ this.$store.getters }}</span>
      </div> -->
      </div>
    </div>
    <div>
      <el-drawer
        title=""
        :visible.sync="openDrawer"
        direction="ltr"
        :with-header="false"
        :append-to-body="true"
        modal-class="AIdrawer"
        :modal-append-to-body="false"
        @closed="closeDrawer"
      >
        <div style="height: 100%; padding-top: 60px; box-sizing: border-box">
          <div class="Drawer" @click="jump('container')">
            <div class="DrawerBox">
              <svg-icon
                icon-class="containerCenter"
                class="DrawerIcon"
              ></svg-icon>
            </div>
            容器中心
          </div>
          <div class="Drawer" @click="jump('users')">
            <div class="DrawerBox">
              <svg-icon icon-class="userCenter" class="DrawerIcon"></svg-icon>
            </div>
            个人中心
          </div>
          <div class="Drawer" @click="jump('mirror')">
            <div class="DrawerBox">
              <svg-icon icon-class="community" class="DrawerIcon"></svg-icon>
            </div>
            应用社区
          </div>
          <div class="Drawer" @click="jump()">
            <div class="DrawerBox">
              <svg-icon icon-class="website" class="DrawerIcon"></svg-icon>
            </div>
            算家云官网
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navigation',
  data() {
    return {
      basePicUrl: process.env.VUE_APP_PIC_API,
      index: 0,
      SuanjiaToken: '',
      openDrawer: false,
      isMask: false,
      timer: '',
      timer2: '',
      showOpenDrawerBtn: false, //是否显示点击展开按钮
    }
  },
  asyncData({ $auth }) {
    this.SuanjiaToken = $auth.getSuanJiaToken()
  },
  created() {
    // console.log("this.$store.getters :>> ", this.$store.getters);
    // this.SuanjiaToken = this.$getSuanJiaToken();
    // if (!this.$store.getters.avatar && this.SuanjiaToken) {
    // this.getRandomAvatar();
    // }
  },
  mounted() {
    // if (this.$route.meta.name != "home") {
    //   document.getElementById("home").style.display = "";
    // }
    // if (this.$route.meta.name == "market") {
    //   document
    //     .getElementById(`${this.$route.meta.name}`)
    //     .classList.add("active");
    // } else if (this.$route.meta.name == "application") {
    //   document
    //     .getElementById(`${this.$route.meta.name}`)
    //     .classList.add("active");
    // } else if (
    //   this.$route.meta.name == "news" ||
    //   this.$route.meta.name == "detail"
    // ) {
    //   document.getElementById("news").classList.add("active");
    // } else if (this.$route.meta.name == "introduction") {
    //   document.getElementById("introduction").classList.add("active");
    // }
  },
  methods: {
    handleMouseOverLogo() {
      //鼠标移入logo
      this.showOpenDrawerBtn = true
    },
    handleMouseOutLogo() {
      if (!this.openDrawer) {
        this.showOpenDrawerBtn = false
      }
    },
    openDrawerClick() {
      //点击展开
      this.showOpenDrawerBtn = false
      clearTimeout(this.timer)
      clearTimeout(this.timer2)
      this.openDrawer = true
      this.isMask = true
    },
    closeDrawerClick() {
      //点击关闭
      // this.timer = setTimeout(() => {
      this.openDrawer = false
      this.showOpenDrawerBtn = true
      // }, 200); // 设置200毫秒延迟，调整以避免闪烁
      this.timer2 = setTimeout(() => {
        this.isMask = false
      }, 300)
    },
    closeDrawer() {
      this.isMask = false
    },
    toHelp() {
      window.open('/help', '_blank')
    },
    toWebsite() {
      window.open('/container/#/', '_blank')
    },
    jump(value) {
      // return console.log("跳转",this.$store.state.token)
      //隐藏部分sidebar跳转页面
      // console.log(123123,value)
      const urlObject = new URL(window.location.href)

      const href = `${urlObject.protocol}//${urlObject.host}/`
      // console.log(href)
      if (this.$store.state.token || value == 'mirror') {
        if (value) {
          window.location.href = href + value
        } else {
          window.location.href = href
        }
      } else {
        window.location.href = href
      }
    },
    // async getRandomAvatar() {
    //   let res = await this.$generalGet('avatars', {})
    //   await this.$generalPatchOne('users', this.$store.getters.userId, {
    //     avatar: res[Math.floor(Math.random() * res.length)].imageUrl,
    //   })
    // },
    login() {
      //   window.open("/windows/#/", "__blank");
      window.open('/container/#/')
    },
  },
}
</script>
<style scoped lang="scss">
.nav {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  //   box-sizing: border-box;
  width: 100%;
  //   backdrop-filter: blur(20px);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // flex-shrink: 0;
  //background: url("../../../../public/images/nav_bg.png") no-repeat;
  // background: linear-gradient(90deg,
  //     rgba(111, 172, 252, 1) 40%,
  //     rgba(111, 220, 176, 1) 100%);
  // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 1);

  // background-size: cover;
  // -webkit-backdrop-filter: blur(20px);
  //   background-color: rgba(255, 255, 255, 0.4);
  //   box-shadow: 0px 0px 20px -14px black;
  .logo {
    // border: 1px solid #f00;
    width: fit-content;
    color: #000;
    font-size: 18px;
    display: flex;
    height: 100%;
    align-items: center;
    cursor: pointer;

    .suanjiayunLogo {
      img {
        width: 110px;
        height: 32px;
        // height: 28px;
        vertical-align: middle;
        margin-top: -5px;
      }
    }

    .divided {
      width: 2px;
      height: 20px;
      border-radius: 2px;
      background-color: rgba(63, 181, 73, 1);
      // margin: 8px 13px 0 13px;
      // margin: 8px 0 0 0;
    }

    .model_name {
      // width: 80px;
      // margin-top: 9px;
      color: #222;
      font-size: 16px;
      font-weight: 700;
      // letter-spacing: 1px;
      margin-left: 12px;
      height: 100%;
      line-height: 58px;
      // border: 1px solid #f00;
      position: relative;
    }
    .titleTextBefore::before {
      content: '';
      position: absolute;
      left: -12px;
      // top: -2px;
      width: 2px;
      top: 18px;
      // height: 100%;
      height: 20px;
      border-radius: 2px;
      // background: rgba(7, 118, 249, 1);
      background: #3fb549;
    }
  }

  .unlogin {
    width: 250px;
    height: 60px;
    // background-color: #ccc;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24px;

    .official_website {
      display: flex;
      align-items: center;
      color: #000000;
      font-size: 16px;
      cursor: pointer;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }

    .platform_box {
      width: 120px;
      height: 40px;
      // opacity: 1;
      border-radius: 2px;
      background: rgba(63, 181, 73, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
    }

    .help {
      display: flex;
      align-items: center;
      color: #000000;
      font-size: 16px;
      cursor: pointer;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }

    .divided {
      width: 2px;
      height: 20px;
      border-radius: 2px;
      background-color: #fff;
      line-height: 20px;
      margin: 8px 13px 0 13px;
    }

    .register {
      width: 100px;
      height: 40px;
      text-align: center;
      cursor: pointer;
      // background-color: #0776f9;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #fff;
      border-radius: 20px;

      span {
        color: #fff;
      }

      &:hover {
        background-color: rgba($color: #fff, $alpha: 0.1);
      }
    }

    .loging {
      width: 40px;
      height: 40px;
      background-color: #ccc;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      margin-right: 24px;

      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}
.DrawerBtn {
  width: 149px;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
  justify-content: center;
  background: rgba(63, 181, 73, 1);
  .DrawerBtn-text {
    margin-left: 10px;
    font-size: 16px;
    font-weight: 700;
  }
}
::v-deep .el-drawer {
  // border: 1px solid #f00;
  // margin-top: 60px;
  box-shadow: none !important;
  width: 149px !important;

  .Drawer {
    // border: 1px solid #f00;
    height: 106px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;

    .DrawerBox {
      width: 30px;
      height: 30px;
      margin: 0 auto;
      margin-bottom: 8px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      line-height: 30px;

      .DrawerIcon {
        width: 16.65px;
        height: 17.48px;
      }
    }
  }

  .Drawer:hover {
    background: rgba(247, 250, 248, 1);
    color: rgba(63, 181, 73, 1);

    .DrawerBox {
      background: rgba(63, 181, 73, 1);
    }
  }
}

@media screen and (max-width: 580px) {
  .nav {
    min-width: 580px;
  }
}
</style>
